<template>
	<el-container>
	  <el-header class="header3">
		  <el-form :inline="true" :model="searchdata" class="demo-form-inline">
		    <el-form-item>
		      <el-input v-model="searchdata" placeholder="搜索" clearable="true"><el-button slot="append" @click="search" icon="el-icon-search"></el-button></el-input>
		    </el-form-item>
			<el-form-item>
			  <el-button type="primary" @click="istrue1=true" plain>添加</el-button>
			</el-form-item>
		  </el-form>
		  <el-dialog
		    title="查找"
		    :visible.sync="istrue3"
		    width="50%"
		    :before-close="handleClose">
		    <el-table
		        :data="search2"
		        border
		        style="width: 100%;"
		    	>
		    	<el-table-column
		    		prop="commodityid"
		    		label="商品编号"
		    		width="50">
		    	</el-table-column>
		        <el-table-column
		          prop="commodityname"
		          label="商品名称"
		          width="200">
		        </el-table-column>
		        <el-table-column
		          prop="commoditynum"
		          label="商品数量(件)"
		          width="100">
		        </el-table-column>
		        <el-table-column
		          prop="commodityprice"
		          label="商品价格(元)"
		    				width="100">
		        </el-table-column>
				<el-table-column
					prop="dataofproduced"
		    		label="生产日期"
		    		width="200">
		    	</el-table-column>
		    	<el-table-column
		    		prop="databaozhi"
		    		label="保质期(天)"
		    		width="200">
		    	</el-table-column>
		    	<el-table-column
		    		prop="manufacturer"
		    		label="厂商"
		    		width="300">
		    	</el-table-column>
		    	<el-table-column
		    		prop="commodityaddress"
		    		label="生产地"
		    		width="300">
		    	 </el-table-column>
				 <el-table-column
				   label="操作"
				   width="300">
				 	<template slot-scope="scope">
				 		<el-button type="primary" @click="update(scope.$index, scope.row)">修改</el-button>
				 		<el-button type="danger" @click="Delete(scope.$index, scope.row.commodityid)">删除</el-button>
				 	</template>
				 					
				 </el-table-column>
		      </el-table>
		    <span slot="footer" class="dialog-footer">
		      <el-button type="primary" @click="istrue3 = false">确 定</el-button>
		    </span>
		  </el-dialog>
		  <el-dialog
		    title="添加"
		    :visible.sync="istrue1"
		    width="50%"
		    :before-close="handleClose">
				<div class="inputadd">
					<el-form ref="adddata" :rules="rules" :model="adddata" label-width="100px">
						<el-form-item label="商品编号" prop="addid">
						  <el-input v-model="adddata.addid"></el-input>
						</el-form-item>
					  <el-form-item label="商品名称" prop="addname">
					    <el-input v-model="adddata.addname"></el-input>
					  </el-form-item>
					  <el-form-item label="商品数量" prop="addnum">
					    <el-input v-model.number="adddata.addnum"></el-input>
					  </el-form-item>
					  <el-form-item label="商品价格" prop="addprice">
					    <el-input v-model.number="adddata.addprice"></el-input>
					  </el-form-item>
					  <el-form-item label="生产日期" prop="adddataproduced">
					    <el-input v-model="adddata.adddataproduced"></el-input>
					  </el-form-item>
					  <el-form-item label="保质期" prop="addbaozhidata">
					    <el-input v-model.number="adddata.addbaozhidata"></el-input>
					  </el-form-item>
					  <el-form-item label="商品厂商" prop="addmanufacturer">
					    <el-input v-model="adddata.addmanufacturer"></el-input>
					  </el-form-item>
					  <el-form-item label="商品产地" prop="addaddress">
					    <el-input v-model="adddata.addaddress"></el-input>
					  </el-form-item>
					</el-form>
				</div>
		    <span slot="footer" class="dialog-footer">
		      <el-button @click="istrue1 = false">取 消</el-button>
		      <el-button type="primary" @click="add">确 定</el-button>
		    </span>
		  </el-dialog>
	  </el-header>
	  <el-main class="main3">
		  <el-table
		      :data="comeindata"
		      border
		      style="width: 100%;"
			  >
			  <el-table-column
			    label="编号"
			    type="index"
				width="50">
			  </el-table-column>
			  <el-table-column
				label="状态"
				prop="verifymark"
				width="80">
				  <template slot-scope="scope" >
						<span slot="reference" v-if="scope.row.verifymark == 1">
				            <i class="dotClass" style="background-color: springgreen"></i>
				        </span>
				        <span slot="reference" v-if="scope.row.verifymark == 0" >
				            <i class="dotClass" style="background-color: red"></i>
				        </span>
				    </template>
				  </el-switch>
				</el-table-column>
			  <el-table-column
			    prop="commodityid"
			    label="商品编号"
			    width="50">
			  </el-table-column>
		      <el-table-column
		        prop="commodityname"
		        label="商品名称"
		        width="200">
		      </el-table-column>
		      <el-table-column
		        prop="commoditynum"
		        label="商品数量(件)"
		        width="100">
		      </el-table-column>
		      <el-table-column
		        prop="commodityprice"
		        label="商品价格(元)"
				width="100">
		      </el-table-column>
			  <el-table-column
			    prop="dataofproduced"
			    label="生产日期"
				width="200">
			  </el-table-column>
			  <el-table-column
			    prop="databaozhi"
			    label="保质期(天)"
				width="200">
			  </el-table-column>
			  <el-table-column
			    prop="manufacturer"
			    label="厂商"
				width="300">
			  </el-table-column>
			  <el-table-column
			    prop="commodityaddress"
			    label="生产地"
				width="300">
			  </el-table-column>
			  <el-table-column
			    label="操作"
			    width="300">
				<template slot-scope="scope">
					
					<el-button type="primary" @click="update(scope.$index, scope.row)">修改</el-button>
					<el-button type="danger" @click="Delete(scope.$index, scope.row.commodityid)">删除</el-button>
					<el-button type="primary" @click="verify(scope.$index, scope.row)">核实</el-button>
					
					<el-dialog
					  title="修改"
					  :visible.sync="istrue2"
					  width="50%"
					  :before-close="handleClose">
					  <el-form ref="row" :model="row" label-width="100px">
					  	
					    <el-form-item label="商品名称" prop="commodityname">
					      <el-input v-model="row.commodityname"></el-input>
					    </el-form-item>
					    <el-form-item label="商品数量" prop="commoditynum">
					      <el-input v-model.number="row.commoditynum"></el-input>
					    </el-form-item>
					    <el-form-item label="商品价格" prop="commodityprice">
					      <el-input v-model.number="row.commodityprice"></el-input>
					    </el-form-item>
					    <el-form-item label="生产日期" prop="dataofproduced">
					      <el-input v-model="row.dataofproduced"></el-input>
					    </el-form-item>
					    <el-form-item label="保质期" prop="databaozhi">
					      <el-input v-model.number="row.databaozhi"></el-input>
					    </el-form-item>
					    <el-form-item label="商品厂商" prop="manufacturer">
					      <el-input v-model="row.manufacturer"></el-input>
					    </el-form-item>
					    <el-form-item label="商品产地" prop="commodityaddress">
					      <el-input v-model="row.commodityaddress"></el-input>
					    </el-form-item>
					  </el-form>
					  <span slot="footer" class="dialog-footer">
					    <el-button @click="istrue2 = false">取 消</el-button>
					    <el-button type="primary" @click="update1">确 定</el-button>
					  </span>
					</el-dialog>
					
				</template>
					
			  </el-table-column>
			  
		    </el-table>
			
				  <el-pagination
				    background
					@size-change="size_change"
					@current-change="current_change"
					:current-page=pageNum 
					:page-size = 5
				    layout="prev, pager, next"
				    :total= "total">
				  </el-pagination>
			
	  </el-main>
	  
	</el-container>
</template>

<script>
	export default {
		name: 'comeinmanage',
		data() {
			return {
				total: 0,
				pageNum: 1,
				pageSize:0,
				comeindata: [],
				pagelist:[],
				row: {
					index: '',
					commodityid: '',
					commodityname: '',
					commoditynum: '',
					commodityprice:'',
					dataofproduced: '',
					databaozhi: '',
					manufacturer: '',
					commodityaddress: '',
				},
				adddata: {
					addid: '',
					addname: '',
					addnum: '',
					addprice:'',
					adddataproduced: '',
					addbaozhidata: '',
					addmanufacturer: '',
					addaddress: '',
				},
				searchdata: '',
				search2: [],
				istrue1: false,
				istrue2: false,
				istrue3: false,
				rules: {
					addid: [
						{required: true, message: '请输入商品编号', trigger: 'blur'}
					],
					addname: [
						{required: true, message: '请输入商品名称', trigger: 'blur' }
					],
					addnum: [
						{required: true, message: '请输入商品数目', trigger: 'blur' },
						{type: 'number', message: '请输入数字', trigger:'blur'}
					],
					addprice: [
						{required: true, message: '请输入商品价格', trigger: 'blur'},
						{type: 'number', message: '请输入数字', trigger: 'blur'}
					],
					adddataproduced: [
						{required: true, message: '请输入生产日期', trigger: 'blur'},
					],
					addbaozhidata: [
						{required: true, message: '请输入保质期', trigger: 'blur'},
						{type: 'number', message: '请输入数字', trigger: 'blur'}
					],
					addmanufacturer: [
						{required: true, message: '请输入商品厂商', trigger: 'blur'},
					],
					addaddress: [
						{required: true, message: '请输入生产地', trigger: 'blur'}
					]
				},
			}
		},
		methods: {
			verify(index, row) {
				console.log(row.commoditynum);
				this.$axios.post("http://localhost:8848/commodity/verify", this.$qs.stringify({
					commodityid: row.commodityid,
					commodityname: row.commodityname,
					commoditynum: row.commoditynum,
					commodityprice: row.commodityprice,
					dataofproduced: row.dataofproduced,
					databaozhi: row.databaozhi,
					manufacturer: row.manufacturer,
					commodityaddress: row.commodityaddress
				}))
				.then( (resp) => {
					var u = resp.data;
					
					if (u == 1) {
						this.$message.success("核对成功");
						this.display();
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
			},
			//监听 pagesize 改变的事件
			   size_change(newSize){
			       this.pageSize = newSize
				   this.comeindata.push(this.pagelist);
				   console.log(newSize);
			   },
			   //监听 页码值 改变的事件
			   current_change(newPage){
			       this.pageNum = newPage
			       //this.comeindata.push(this.pagelist);
			       console.log(newPage);
				   this.display();
			   },
			display() {
				var url = "http://localhost:8848/commodity/display?pagenum="+this.pageNum;
				// var url = "http://localhost:8848/commodity/display?pagenum=1";
				this.$axios.get(url)
					.then( (resp) => {
						var u = resp.data;
						// console.log(u.list);	
						this.comeindata = u.list;
						this.pageSize = u.pageSize;
						// console.log(this.pageSize);
						this.pageNum = u.pageNum;
						// console.log(this.pageNum);
						// console.log(this.comeindata);
						this.total = u.total;
						
					})
					.catch( (err) => {
						console.log("error=", err);
					})
			},
			search() {
				
				var url="http://localhost:8848/commodity/search?commodityid="+this.searchdata+"&commodityname="+this.searchdata;
				
				this.$axios.get(url)
				.then( (resp) => {
					var u = resp.data;
					
					if (u != null) {
						console.log(u);
						this.istrue3 = true;
						// this.search2.splice(0, 1, u);
						// this.search2.push(u);
						this.search2 = u;
					}
					else {
						this.$message.error("查询失败");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
			},
			add() {
				this.$axios.post("http://localhost:8848/commodity/insert", this.$qs.stringify({
					commodityid: this.adddata.addid,
					commodityname: this.adddata.addname,
					commoditynum: this.adddata.addnum,
					commodityprice: this.adddata.addprice,
					dataofproduced: this.adddata.adddataproduced,
					databaozhi: this.adddata.addbaozhidata,
					manufacturer: this.adddata.addmanufacturer,
					commodityaddress: this.adddata.addaddress
				}))
				.then( (resp) => {
					var u = resp.data;
					
					if (u == 1) {
						this.$message.success("添加成功");
						this.display();
						this.istrue1 = false;
					}
					else {
						this.$message.error("添加失败");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
			},
			update(index, row) {
				this.istrue2 = true;
				this.row.index = index;
				this.row.commodityid = row.commodityid;
				this.row.commodityname = row.commodityname;
				this.row.commoditynum = row.commoditynum;
				this.row.commodityprice = row.commodityprice;
				this.row.dataofproduced = row.dataofproduced;
				this.row.databaozhi = row.databaozhi;
				this.row.manufacturer = row.manufacturer;
				this.row.commodityaddress = row.commodityaddress;
				console.log(row.commodityname);
				console.log(this.row);
			},
			update1() {
				this.$axios.post("http://localhost:8848/commodity/update", this.$qs.stringify({
					commodityid: this.row.commodityid,
					commodityname: this.row.commodityname,
					commoditynum: this.row.commoditynum,
					commodityprice: this.row.commodityprice,
					dataofproduced: this.row.dataofproduced,
					databaozhi: this.row.databaozhi,
					manufacturer: this.row.manufacturer,
					commodityaddress: this.row.commodityaddress,
				}))
				.then( (resp) => {
					var u = resp.data;
					
					if (u == 1) {
						this.$message.success("修改成功");
						this.comeindata[this.row.index].commodityname = this.row.commodityname
						this.comeindata[this.row.index].commoditynum = this.row.commoditynum
						this.comeindata[this.row.index].commodityprice = this.row.commodityprice
						this.comeindata[this.row.index].dataofproduced = this.row.dataofproduced
						this.comeindata[this.row.index].databaozhi = this.row.databaozhi
						this.comeindata[this.row.index].manufacturer = this.row.manufacturer
						this.comeindata[this.row.index].commodityaddress = this.row.commodityaddress
						this.display();
					}
					else if (u == 0) {
						this.$message.error("修改失败请重试");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
				this.istrue2 = false;
			},
			Delete(index, id) {
				var url="http://localhost:8848/commodity/delete?commodityid="+id;
				
				this.$axios.get(url)
				.then( (resp) => {
					var u = resp.data;
					
					if (u == 1) {
						this.$message.success("删除成功");
						this.display();
					}
					else if (u == 0) {
						this.$message.error("删除失败");
					}
				})
				.catch( (err) => {
					console.log("error=", err);
				})
			},
			handleClose(done) {
			        this.$confirm('确认关闭？')
			          .then(_ => {
			            done();
			          })
			          .catch(_ => {});
			      }
		},
		created() {
			
		},
		mounted() { undefined
			this.display();
		}
	}
</script>

<style>
	.header3{
		margin:0;
		padding: 0;
		height: 30px;
	    color: #333;
	    text-align: center;
	    line-height: 60px;
	  }
	  
	  .main3 {
	    color: #333;
	    text-align: center;
		height: 500px;
	    line-height: 40px !important;
	  }
	  
	  .inputadd {
		  width: 500px;
	  }
	  
	  .dotClass {
	    width:10px;
	    height:10px;
	    border-radius: 50%;
	    display: block;
	    margin-left: 10px;
	  }
</style>
